import React from 'react'
import './ComA.css'
import {Link} from 'react-router-dom'
class ComA extends React.Component {
  constructor() {
    // 调用super之后就会有this
    super()
    // state,状态机，类似vue中的data。统一处理数据
    this.state = {
      hasWude: false,
      arr1: ['青龙摆尾', '仙人指路'],
      age: 18,
      content: '默认内容',
      fatherPath: '/fathercom'
    }
    this.addItem = this.addItem.bind(this)
  }
  // 增加一岁
  old() {
    // 想要修改state中的数据，需要用setState，这是异步的方法
    this.setState({
      age: this.state.age + 1,
      hasWude: true
    }, function() {
      console.log(this.state);
    })
  }
  // 增加一项
  addItem() {
    let tepmArr = this.state.arr1;
    tepmArr.push('平沙落雁');
    this.setState({
      arr1: tepmArr
    }, ()=> {
      console.log(this.state.arr1);
    })
  }
  // 事件监听-传参
  getArg(arg1, arg2) {
    console.log(`我是${arg2}传过来的参数：${arg1}`);
  }
  // 事件监听-获取事件对象
  getEvent(e) {
    // ES5的调用方式是隐式传递；ES6是显式传递
    console.log(e);
  }
  // 既有自定义参数，又有事件对象 
  getTotalEvent(arg1, arg2, arg3) {
    // ES5传递事件对象是隐式的，ES6是显式的
    // ES5的this在最前，自定义参数放前面，事件在最后
    console.log(arg1, arg2, arg3);
  }
  // 模拟vue的双向绑定
  likeBind(e) {
    this.setState({
      content: e.target.value
    })
  }
  // 跳转页面的第二种方式
  changePath(url) {
    // push  replace  go  goBack
    this.props.history.push(url);
    // this.props.history.replace(url);
    // this.props.history.go(2);
    // this.props.history.goBack();
  }
  render() {
    let wuZhaoshi = this.state.arr1.map((item, index) => {
      return <p key={index}>{item}</p>
    })
    let _this = this;
    return (
      <div>
        <Link to="/">返回首页</Link>
        <Link to={this.state.fatherPath}>父组件页</Link>
        <Link to="/soncom">子组件页</Link>
        <hr />
        <button onClick={()=>this.changePath('/')}>返回首页</button>
        <button onClick={()=>this.changePath('/fathercom')}>父组件页</button>
        <button onClick={()=>this.changePath('/soncom')}>子组件页</button>
        <p>{this.state.age}</p>
        <p>{JSON.stringify(this.state.hasWude)}</p>
        <button onClick={()=>this.old()}>长大一岁</button>
        {/* ES5的调用方式中，需要绑定this，否则就是undefined；ES6正常使用 */}
        <button onClick={this.addItem}>增加一项(ES5)</button>
        <button onClick={()=>this.addItem()}>增加一项(ES6)</button>
        <hr />
        <button onClick={()=>this.getArg(this.state.age, 'ES6')}>ES6传参</button>
        <button onClick={this.getArg.bind(this, this.state.hasWude, 'ES5')}>ES5传参</button>
        <hr />
        <button onClick={(e)=>this.getEvent(e)}>ES6的事件对象</button>
        <button onClick={this.getEvent.bind(this)}>ES5的事件对象</button>
        <hr />
        {/* 既有自定义参数，又有事件对象 */}
        <button onClick={(e)=>this.getTotalEvent(666, this.state.age, e)}>ES6的既又</button>
        <button onClick={this.getTotalEvent.bind(this,'ES5', this.state.age)}>ES5的既又</button>
        <hr />
        {/* <input :value="xxx" @input="fn" /> */}
        {/* <input value={this.state.content} onChange={(e)=>this.likeBind(e)}/> */}
        <input value={this.state.content} onInput={this.likeBind.bind(this)}/>
        <p>{this.state.content}</p>
        {(function () {
          if (_this.state.hasWude) {
            return <p>窝里斗</p>
          } else {
            return <p>欺负69岁的老同志</p>
          }
        })()}
        <p>闪电五连鞭的前两招：</p>
        {wuZhaoshi}
      </div>
    )
  }
}

export default ComA